<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="header-container">
          <!-- Logo和标题 -->
          <el-menu :default-active="activeIndex"
                   class="el-menu-demo"
                   mode="horizontal"
                   :ellipsis="false"
                   background-color="#FFFFFF"
                   text-color="#606266"
                   active-text-color="#409eff"
                   @select="handleSelect">

            <el-menu-item index="0" class="logo-menu-item">
              <img style="height: 80%" src="@/assets/dz.png" alt="颜途" />
              <span class="header-title">"颜途"地陪旅游服务平台</span>
            </el-menu-item>

            <div class="flex-grow" />

            <el-sub-menu index="1">
              <template #title>
                <el-icon><stamp /></el-icon>
                <span class="user-name">{{ loginAdmin ? loginAdmin.username : '未登录' }}</span>
              </template>
              <el-menu-item index="logout" class="logout-item">
                <el-icon><SwitchButton /></el-icon>
                <span>退出登录</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
      </el-header>

      <el-container  style="height: calc(100vh - 80px);">
        <el-aside :width="isCollapse ? '64px' : '200px'">

          <!-- 折叠按钮区 -->
          <div class="aside-header">
            <div class="aside-title">管理员页面</div>
            <el-icon @click="isCollapse=!isCollapse" class="collapse-icon">
              <Expand v-if="isCollapse" />
              <Fold v-else />
            </el-icon>
          </div>

          <!-- 菜单区 -->
          <el-menu active-text-color="#409eff"
                   background-color="#f8fbff"
                   class="el-menu-vertical-demo"
                   :default-active="$route.path"
                   text-color="#333"
                   :collapse="isCollapse"
                   @select="handleMenu"
                   style="height: calc(100% - 60px);"
                   :unique-opened="true">
            <!-- 主页菜单项 -->
            <el-menu-item index="/main" class="menu-item">
              <el-icon><House /></el-icon>
              <span v-if="!isCollapse" class="menu-text">主页</span>
            </el-menu-item>
            <!-- 动态生成菜单 -->
            <el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="index.toString()" class="sub-menu">
              <template #title>
                <component
                    class="menu-icon"
                    :is="menu.icon" />
                <span v-if="!isCollapse" class="menu-text">{{ menu.name }}</span>
              </template>
              <el-menu-item v-for="(child, ind) in menu.children" :key="ind" :index="child.path" class="sub-menu-item">
                <el-icon>
                  <component :is="child.icon" />
                </el-icon>
                <span v-if="!isCollapse" class="menu-text">{{ child.name }}</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 欢迎页内容：仅在根路径显示 -->
          <div v-if="$route.path === '/'" class="welcome-main">
            <div class="welcome-content">
              <div class="welcome-image-wrapper">
                <img
                    src="@/assets/dzyyds.jpg"
                    alt="颜途地陪"
                    class="welcome-image"
                />
              </div>
              <div class="welcome-text">
                <h1 class="welcome-title">
                  <span class="welcome-highlight">颜途</span> 地陪旅游服务平台
                </h1>
                <p class="welcome-subtitle">
                  专业 · 贴心 · 便捷
                </p>
                <p class="welcome-description">
                  为您提供最优质的地陪服务，让每一次旅行都成为美好回忆。<br>
                  专业的导游团队，贴心的服务体验，让您的旅途更加精彩纷呈。
                </p>
                <div class="welcome-features">
                  <div class="feature-item">
                    <i class="el-icon-location-outline feature-icon"></i>
                    <span>本地专业导游</span>
                  </div>
                  <div class="feature-item">
                    <i class="el-icon-user feature-icon"></i>
                    <span>一对一服务</span>
                  </div>
                  <div class="feature-item">
                    <i class="el-icon-star-off feature-icon"></i>
                    <span>五星好评保障</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 子页面内容：当不是根路径时显示 -->
          <router-view v-else />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import router from '@/router';
import {Stamp, SwitchButton, Expand, Fold, House} from "@element-plus/icons-vue";
import login_api from "@/api/login_api.js";
import {getJwtPayload} from "@/util/auth.js";
import {ElMessage} from "element-plus";

const activeIndex = ref('1')

// 取出当前登录用户的信息
const loginAdmin = ref({
  username: "未登录",
});

getLogin();

// 菜单  用户管理， 分类管理， 商品管理
const menuData = ref([
  {
    name: '信息管理', icon: 'GobletFull', children: [
      {name: '地陪列表', icon: 'MoonNight', path: "/Guide"},
      {name: '游客列表', icon: 'User', path: "/Visitor"},
    ]
  },
  {
    name: '管理员管理', icon: 'User', children: [
      {name: '管理员列表', icon: 'UserFilled', path: "/manager"},
      {name: '当前管理员信息', icon: 'Edit', path: "/manager/profile"},
    ]
  },
  {
    name: '交易记录', icon: 'Calendar', children: [
      {name: '交易记录列表', icon: 'Goods', path: "/transaction"},
    ]
  },
]);

async function getLogin() {
  let token = localStorage.getItem('token');
  if (!token) {
    router.push('/login');
  }

  const res = await login_api.loginInfo();
  console.log(res);
  loginAdmin.value.username = res.username || '未登录';
}

onMounted(async () => {
  await getLogin();
})

// 用户下拉菜单的点击
function handleSelect(key, keyPath) {
  if (key == 'logout') {
    // 用户退出
    logout();
  }
}

// 左侧菜单动作
function handleMenu(key) {
  if (key) {
    router.push(key);
  }
}

// 退出
function logout() {
  //清除Token
  localStorage.removeItem('token')
  localStorage.removeItem('user')
  // 跳转到登录
  router.push('/login')
}

// 左侧菜单展开折叠
const isCollapse = ref(false);
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
}

.common-layout,
.el-container {
  height: 100%;
}

.el-header {
  --el-header-padding: 0;
  --el-header-height: 80px;
  box-sizing: border-box;
  flex-shrink: 0;
  height: var(--el-header-height);
  padding: var(--el-header-padding);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-menu--horizontal {
  height: 80px;
  border: none;
}

.logo-menu-item {
  display: flex;
  align-items: center;
}

.header-title {
  padding-left: 20px;
  font-size: 22px;
  font-weight: 600;
  color: #409eff;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(64, 158, 255, 0.2);
}




.user-name {
  font-weight: 500;
  letter-spacing: 0.5px;
}

.logout-item {
  font-weight: 500;
}

.el-aside {
  background-color: #f8fbff;
  border-right: 1px solid #e4e7ed;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.el-main {
  padding: 0;
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
  overflow: auto;
}

.el-menu {
  border-width: 0;
}

.menu-item, .sub-menu-item {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  border-radius: 4px;
  margin: 2px 8px;
  transition: all 0.3s ease;
}

.menu-item:hover, .sub-menu-item:hover {
  background-color: rgba(64, 158, 255, 0.1) !important;
}

.sub-menu :deep(.el-sub-menu__title) {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  border-radius: 4px;
  margin: 2px 8px;
  transition: all 0.3s ease;
}

.sub-menu :deep(.el-sub-menu__title:hover) {
  background-color: rgba(64, 158, 255, 0.1) !important;
}

.menu-text {
  margin-left: 10px;
}

.menu-icon {
  width: 1em;
  height: 1em;
}

.aside-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(135deg, #e6f3ff 0%, #d1e7ff 100%);
  border-bottom: 1px solid #d1e1ff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.aside-title {
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
  letter-spacing: 1px;
  text-shadow: 0 1px 1px rgba(64, 158, 255, 0.2);
}

.collapse-icon {
  font-size: 20px;
  color: #409eff;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 8px;
  border-radius: 50%;
}

.collapse-icon:hover {
  transform: scale(1.1);
  background-color: rgba(64, 158, 255, 0.1);
  color: #67c23a;
}

/* 欢迎页样式 */
.welcome-main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 20px;
}

.welcome-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1200px;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(64, 158, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(64, 158, 255, 0.1);
}

.welcome-image-wrapper {
  width: 100%;
  max-width: 600px;
  margin-bottom: 30px;
}

.welcome-image {
  width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(64, 158, 255, 0.15);
  transition: transform 0.3s ease;
  border: 1px solid rgba(64, 158, 255, 0.1);
}

.welcome-image:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 40px rgba(64, 158, 255, 0.25);
}

.welcome-text {
  text-align: center;
  width: 100%;
}

.welcome-title {
  color: #409eff;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 20px 0;
  background: linear-gradient(45deg, #409eff, #67c23a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(64, 158, 255, 0.1);
}

.welcome-highlight {
  position: relative;
}

.welcome-highlight::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(45deg, #409eff, #67c23a);
  border-radius: 2px;
}

.welcome-subtitle {
  color: #409eff;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 15px 0;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(64, 158, 255, 0.1);
}

.welcome-description {
  color: #666;
  font-size: 1.1rem;
  line-height: 1.8;
  margin: 25px 0;
  max-width: 800px;
  letter-spacing: 0.5px;
}

.welcome-features {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  background: linear-gradient(135deg, #409eff, #67c23a);
  color: white;
  border-radius: 15px;
  min-width: 150px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(64, 158, 255, 0.4);
}

.feature-icon {
  font-size: 2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .welcome-content {
    padding: 20px;
    margin: 10px;
  }

  .welcome-title {
    font-size: 2rem;
  }

  .welcome-description {
    font-size: 1rem;
  }

  .welcome-features {
    gap: 20px;
  }

  .feature-item {
    min-width: 120px;
    padding: 15px;
  }

  .aside-header {
    padding: 0 10px;
  }

  .aside-title {
    font-size: 16px;
  }

  .header-title {
    font-size: 18px;
    padding-left: 10px;
  }

  .el-menu--horizontal {
    height: 70px;
  }

  :deep(.el-menu--horizontal > .el-menu-item) {
    height: 70px;
    line-height: 70px;
  }
}
</style>
